<template>
	<view class="InviteItem">
		<view class="item" @tap="showTime">
			<view class="flexc">
				<text class="isQuired">*</text>
				<text class="label">预约时间</text>
			</view>
			<text class="divide"></text>
			<view class="selectTime">
				<text v-if="tutorPlaceData.startTime">{{ dateTime +' '+tutorPlaceData.startTime }}</text>
				<text v-else>选择预约时间</text>
			</view>
		</view>
		<view class="item" @tap="isHoursShow=true">
			<view class="flexc">
				<text class="isQuired">*</text>
				<text class="label">预约时长</text>
			</view>
			<text class="divide"></text>
			<view class="selectTime">
				<text v-if="tutorPlaceData.hours">{{tutorPlaceData.hours+'小时'}}</text>
				<text v-else>选择预约时长</text>
			</view>
		</view>
		<view class="item" @click="addressSelect">
			<view class="flexc">
				<text class="isQuired">*</text>
				<text class="label">预约地址</text>
			</view>
			<text class="divide"></text>
			<view class="place">
				<text style="font-size: 24rpx;">{{tutorPlaceData.merchantInfo.address}}</text>
				<tui-icon name="arrowdown" :size="22" color="#999999"></tui-icon>
			</view>
		</view>
		<view class="item">
			<view class="flexc">
				<text class="isQuired">*</text>
				<text class="label">您的称呼</text>
			</view>
			<text class="divide"></text>
			<view class="place">
				<tui-input padding="0" backgroundColor="#f5f5f5" :size="28" :borderBottom="false" :borderTop="false"
					placeholder="请输入您的称呼" clearable v-model="tutorPlaceData.appellation"></tui-input>
				<tui-icon name="arrowdown" :size="22" color="#999999"></tui-icon>
			</view>
		</view>
		<view class="item">
			<view class="flexc">
				<text class="isQuired">*</text>
				<text class="label">联系电话</text>
			</view>
			<text class="divide"></text>
			<view class="selectTime">
				<tui-input type="number" backgroundColor="#f5f5f5" padding="0" :size="28" :borderBottom="false"
					:borderTop="false" placeholder="请输入手机号码" clearable
					v-model="tutorPlaceData.subscribePhone"></tui-input>
			</view>
		</view>
		<view class="item">
			<view class="flexc">
				<text class="isQuired hide">*</text>
				<text class="label">备注</text>
			</view>
			<text class="divide"></text>
			<view class="place">
				<tui-textarea v-model="tutorPlaceData.remark" :size="28" padding="0" backgroundColor="#f5f5f5"
					:borderBottom="false" :borderTop="false" height="200rpx" placeholder="请输入备注信息..."></tui-textarea>
			</view>
		</view>
		<tutor-time ref="TimeRef" :assistantId="assistantId" :times="times" @clear="ClearvisibleTime"
			:visible="visibleTime"></tutor-time>
		<tui-picker :valueField="'id'" :textField="'address'" :show="isPlace" :pickerData="placeShopList"
			@hide="isPlace=false" @change="change"></tui-picker>
		<tui-picker :show="isHoursShow" :valueField="'id'" :textField="'name'" :pickerData="hours"
			@hide="isHoursShow=false" @change="hourChange"></tui-picker>
	</view>
</template>

<script>
	import {
		getPlaceShopList
	} from "@/http/api/shop/shop.js"
	export default {
		name: 'InviteItem',
		emits: [],
		props: {
			//分类id
			categoryId: {
				type: String,
				default: ''
			},
			hours: {
				type: Array,
				default: []
			},
			assistantId: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				//教练邀约数据
				tutorPlaceData: {
					assistantId: '', //教练id
					merchantId: '', //所属商家id
					subscribePhone: '', //预约手机号
					appellation: '', //称呼
					startTime: '', //开始时间 
					remark: '', //备注
					address: "",
					longitude: 0,
					latitude: 0,
					merchantInfo: {
						id: 0,
						merchantName: "",
						address: "",
						longitude: 0,
						latitude: 0
					},
				},
				dateTime: '',
				isHoursShow: false,
				//可以下单的商家选择
				isPlace: false,
				times: [],
				visibleTime: false, //日期时间选择
				placeShopList: [] //可以下单的商家列表
			};
		},
		computed: {
			houers() {
				const list = [{
						name: '1小时',
						id: 1
					},
					{
						name: '2小时',
						id: 2
					},
					{
						name: '3小时',
						id: 3
					},
					{
						name: '4小时',
						id: 4
					},
					{
						name: '5小时',
						id: 5
					},
					{
						name: '6小时',
						id: 6
					}
				]
				return `scale(${this.scaleRatio}) translateX(${this.translateX})`;
			}
		},
		methods: {
			reload() {
				this.tutorPlaceData = {
					assistantId: '', //教练id
					merchantId: '', //所属商家id
					subscribePhone: '', //预约手机号
					appellation: '', //称呼
					startTime: '', //开始时间 
					hours: '', //时长 
					remark: '', //备注
					merchantInfo: {
						id: 0,
						merchantName: "",
						address: "",
						longitude: 0,
						latitude: 0
					}
				}
			},
			//选择可预约时间
			showTime() {
				this.visibleTime = true
			},
			ClearvisibleTime(checkTime) {
				this.tutorPlaceData.startTime = checkTime.time
				this.dateTime = checkTime.dete
				this.visibleTime = false
			},
			//选择地址
			addressSelect() {
				let info = {
					latitude: this.tutorPlaceData.merchantInfo && this.tutorPlaceData.merchantInfo.latitude || '39.54',
					longitude: this.tutorPlaceData.merchantInfo && this.tutorPlaceData.merchantInfo.longitude ||
						'116.25',
					name: this.tutorPlaceData.merchantInfo.address, // 名称
					address: this.tutorPlaceData.merchantInfo.address, // 详细地址 
				}
				uni.navigateTo({
					url: '/pages/index/modules/addressSelect/addressSelect?info=' + JSON.stringify(info)
				})
			},
			hourChange(e) {
				this.tutorPlaceData.hours = e.id
			},
			//选择商家
			change: function(e) {
				//选择的商家结果 
				const item = this.placeShopList.find((item) => item.id === e.id);
				this.tutorPlaceData.merchantInfo = {
					id: e.id,
					merchantName: e.merchantName,
					address: item.address,
					longitude: item.coordinates && item.coordinates.longitude,
					latitude: item.coordinates && item.coordinates.latitude
				}
			},

		}
	};
</script>

<style lang="scss" scoped>
	.item {
		background: #F5F5F5;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding: 22rpx 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;

		.hide {
			visibility: hidden;
		}

		.isQuired {
			font-weight: 500;
			font-size: 28rpx;
			color: #FF1F00;
			line-height: 33rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

		.flexc {
			display: flex;
			align-items: center;
		}

		.label {
			font-weight: 500;
			font-size: 28rpx;
			width: 112rpx;
			color: #333333;
			margin-left: 8rpx;
			line-height: 33rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.divide {
			margin-left: 20rpx;
			margin-right: 28rpx;
			background-color: #666666;
			width: 2rpx;
			height: 28rpx;
		}

		.selectTime {
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
			line-height: 33rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: 70%;

			.timeCenter {
				height: 2rpx;
				width: 30rpx;
				background-color: #999999;
			}
		}

		.place {
			font-weight: 500;
			width: 70%;
			font-size: 28rpx;
			color: #666666;
			line-height: 33rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
</style>